<template>
	<view class="progress-item-wrap">
		<view class="title">{{ title }}</view>
		<!-- 进度条 -->
		<view class="progress-box">
			<view class="progress" :style="{ width: `${ratio}%` }" />
		</view>
		<view class="city">{{ name }}</view>
		<view class="percent">{{ ratio }}%</view>
	</view>
</template>

<script setup>
const props = defineProps({
	title: {
		type: String,
		defualt: 'TOP1'
	},
	name: {
		type: String,
		default: '合肥市'
	},
	ratio: {
		type: Number,
		default: 0
	}
});
</script>

<style lang="scss">
.progress-item-wrap {
	display: flex;
	align-items: center;
	.title {
		font-weight: bold;
		font-size: 18rpx;
		color: #ffffff;
	}

	.progress-box {
		flex: 1;
		height: 27rpx;
		margin-left: 22rpx;
		background-color: #52afff;

		.progress {
			height: 100%;
			background: linear-gradient(90deg, #1e789f 0%, #00ffe6 100%);
			border-radius: 0 20rpx 20rpx 0;
		}
	}

	.city {
		width: 50rpx;
		text-align: center;
		margin-left: 22rpx;
		font-weight: 400;
		font-size: 22rpx;
		color: #ffffff;
	}

	.percent {
		width: 40rpx;
		text-align: center;
		margin-left: 30rpx;
		font-weight: bold;
		font-size: 16rpx;
		color: #01fee6;
	}
}
</style>
